<script src="//local.adguard.com/adguard-ajax-api/injections/userscripts/Adguard Assistant?ts=63633507801473" type="text/javascript"></script>
<script src="//local.adguard.com/adguard-ajax-api/injections/userscripts/Adguard Popup Blocker?ts=63633507801473" type="text/javascript"></script>
<script src="//local.adguard.com/adguard-ajax-api/injections/content-script.js?ts=63633507801154&amp;domain=www.swiper.com.cn&amp;css=1&amp;js=1&amp;generic=1&amp;stealth=1&amp;ref=0" type="text/javascript"></script>

<!-- End: injected by Adguard -->

<!-- Demo styles -->
<style>

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 700px
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        margin-bottom: 0 !important;
        height:665px !important;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
</style>
<body>
<!-- Swiper -->
<div class="swiper-container screens">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><div class="screen screen1">
            <a href="javascript:;">
                <div class="contain">
                    <div class="screen1_left">
                        <div class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".3s" swiper-animate-delay=".1s"><img src="./img/service/banner2_9.png"></div>
                        <div class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".2s" swiper-animate-delay=".3s"><img src="./img/service/banner2_8.png"></div>
                        <div class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".2s" swiper-animate-delay=".5s"><img src="./img/service/banner2_10.png"></div>
                        <div class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".1s" swiper-animate-delay=".7s"><img src="./img/service/banner2_11.png"></div>
                        <div class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".1s" swiper-animate-delay=".9s"><img src="./img/service/banner2_12.png"></div>
                        <div class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".1s" swiper-animate-delay="1.2s"><img src="./img/service/banner2_13.png"></div>
                        <div class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".8s" swiper-animate-delay="1.5s"><img src="./img/service/banner2_14.png"></div>
                        <div><img src="./img/service/banner2_3.png"></div>
                    </div>
                    <div class="screen1_right">
                        <div class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.3s" swiper-animate-delay=".5s"><img src="./img/service/banner2_4.png"></div>
                        <div class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.3s" swiper-animate-delay=".8s"><img src="./img/service/banner2_5.png"></div>
                        <div class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.3s" swiper-animate-delay="1s"><img src="./img/service/banner2_6.png"></div>
                    </div>
                </div>
            </a>
        </div></div>
        <div class="swiper-slide"><div class="screen screen2">
            <a href="javascript:;">
                <div class="contain">
                    <div class="title">
                        <p class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration=".8s" swiper-animate-delay=".2s"><img src="./img/service/banner3_tt.png"></p>
                        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration=".5s" swiper-animate-delay=".6s">自适应各设备，全网营销首选，调整最佳的阅读体验,最好的用户体验</p>
                    </div>
                    <div class="img_content">
                        <div class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration=".8s" swiper-animate-delay=".9s"><img src="./img/service/banner3_img1.png"></div>
                        <div class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration=".8s" swiper-animate-delay=".6s"><img src="./img/service/banner3_img2.png"></div>
                        <div class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration=".8s" swiper-animate-delay="1.5s"><img src="./img/service/banner3_img3.png"></div>
                        <div class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="1.9s"><img src="./img/service/banner3_img4.png"></div>
                        <div class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration=".8s" swiper-animate-delay="1.2s"><img src="./img/service/banner3_img5.png"></div>
                        <div class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration=".8s" swiper-animate-delay=".3s"><img src="./img/service/banner3_img6.png"></div>
                        <div class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration=".8s" swiper-animate-delay="2s"><img src="./img/service/banner3_img7.png"></div>
                    </div>
                </div>
            </a>
        </div></div>
        <div class="swiper-slide"><div class="screen screen3">
            <a href="javascript:;">
                <div class="contain">
                    <div class="title">
                        <p class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".8s" swiper-animate-delay=".2s"><img src="./img/service/zt_service3_tt.png" alt=""></p>
                        <p class="ani " swiper-animate-effect="bounceInLeft" swiper-animate-duration=".5s" swiper-animate-delay=".6s">微信公众平台开发，定制开发服务,具实现品牌形象统一、本地与微信数据对接设计风格个性化</p>
                    </div>
                    <div class="img_content3">
                        <div class="img_content3_left">
                            <div class="ani " swiper-animate-effect="bounceInUp" swiper-animate-duration=".5s" swiper-animate-delay=".3s"><img src="./img/service/banner4_icon1.png"></div>
                            <div class="ani " swiper-animate-effect="bounceInUp" swiper-animate-duration=".7s" swiper-animate-delay=".6s"><img src="./img/service/banner4_icon2.png"></div>
                            <div class="ani " swiper-animate-effect="bounceInUp" swiper-animate-duration=".9s" swiper-animate-delay=".9s"><img src="./img/service/banner4_icon3.png"></div>
                            <div class="ani " swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="1.2s"><img src="./img/service/banner4_icon4.png"></div>
                        </div>
                        <div class="img_content3_right">
                            <div class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".8s" swiper-animate-delay=".5s"><img src="./img/service/banner4_img4.png"></div>
                            <div class="ani " swiper-animate-effect="fadeIn" swiper-animate-duration=".8s" swiper-animate-delay="1s"><img src="./img/service/banner4_img3.png"></div>
                            <div class="ani " swiper-animate-effect="fadeIn" swiper-animate-duration=".8s" swiper-animate-delay="1.5s"><img src="./img/service/banner4_img2.png"></div>
                            <div class="ani " swiper-animate-effect="fadeIn"  swiper-animate-duration=".8s" swiper-animate-delay="2s"><img src="./img/service/banner4_img1.png"></div>
                        </div>
                    </div>
                </div>
            </a>
        </div></div>
        <div class="swiper-slide"><div class="screen screen4">
            <a href="javascript:;">
                <div class="contain">
                    <div class="title">
                        <p class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".5s" swiper-animate-delay=".2s"><img src="./img/service/banner5_tt.png"></p>
                        <p class="ani " swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1.5s" swiper-animate-delay="1.8s">支持微信商城、小程序商城、PC 网站商城、App商城（iPhone,Android）</p>
                    </div>
                    <ul>
                        <li class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".5s" swiper-animate-delay=".5s"><img src="./img/service/banner5_icon5.png"></li>
                        <li class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".7s" swiper-animate-delay=".6s"><img src="./img/service/banner5_icon4.png"></li>
                        <li class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".9s" swiper-animate-delay=".9s"><img src="./img/service/banner5_icon3.png"></li>
                        <li class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1.2s"><img src="./img/service/banner5_icon2.png"></li>
                        <li class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration="1.2s" swiper-animate-delay="1.5s"><img src="./img/service/banner5_icon1.png"></li>
                    </ul>
                    <div class="screen4_num">
                        <div><img src="./img/service/banner5_img.png"></div>
                        <div class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".8s" swiper-animate-delay="1.2s"><img src="./img/service/banner5_img1.png"></div>
                        <div class="ani " swiper-animate-effect="lightSpeedIn" swiper-animate-duration=".8s"swiper-animate-delay="1s"><img src="./img/service/banner5_img2.png"></div>
                        <div class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".8s" swiper-animate-delay=".7s"><img src="./img/service/banner5_img3.png"></div>
                        <div class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".8s" swiper-animate-delay=".5s"><img src="./img/service/banner5_img4.png"></div>
                        <div class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".8s" swiper-animate-delay="1.6s"><p>独立定制商城的优势</p></div>
                    </div>
                </div>
            </a>
        </div></div>
        <div class="swiper-slide"><div class="screen screen5">
            <a href="javascript:;">
                <div class="contain">
                    <div class="title">
                        <p class="ani " swiper-animate-effect="bounceInDown" swiper-animate-duration=".8s" swiper-animate-delay=".2s"><img src="./img/service/zt_service_tt.png"></p>
                        <p class="ani " swiper-animate-effect="bounceInLeft" swiper-animate-duration=".5s" swiper-animate-delay=".6s">成本低，高回报、持续性好、稳定性高、覆盖面广、全方位提高网站质量</p>
                    </div>
                    <ul class="screen5_img">
                        <li>
                            <img class="center_img" src="./img/service/zt-service_ico4.png">
                            <img class="bg_img" src="./img/service/zt-service_icobj.png">
                            <p class="ani " swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s"swiper-animate-delay=".5s">SEO搜索优化</p>
                        </li>
                        <li>
                            <img class="center_img" src="./img/service/zt-service_ico3.png">
                            <img class="bg_img" src="./img/service/zt-service_icobj.png">
                            <p class="ani " swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s"swiper-animate-delay="1s">百度推广托管</p>
                        </li>
                        <li>
                            <img class="center_img" src="./img/service/zt-service_ico2.png">
                            <img class="bg_img" src="./img/service/zt-service_icobj.png">
                            <p class="ani " swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s"swiper-animate-delay="1.5s">360推广托管</p>
                        </li>
                        <li>
                            <img class="center_img" src="./img/service/zt-service_ico1.png">
                            <img class="bg_img" src="./img/service/zt-service_icobj.png">
                            <p class="ani " swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s"swiper-animate-delay="2s">搜狗推广托管</p>
                        </li>
                    </ul>
                </div>
            </a>
        </div></div>
        <div class="swiper-slide"><div class="screen screen6">
            <a href="javascript:;">
                <div class="contain1">
                    <div class="title">
                        <p class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".2s"><img class="ani bounceInDown"swiper-animate-duration=".5s"swiper-animate-delay=".2s" src="./img/service/zt-service1_tt.png"></p>
                        <ul>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".2s">高端创意网站设计</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".2s">/</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".4s">手机网站设计</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".4s">/</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".6s">APP设计</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".6s">/</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".8s">VI</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".8s">/</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1s">LOGO</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1s">/</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1.2s">画册</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1.2s">/</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1.4s">名片</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1.4s">/</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1.6s">海报</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1.6s">/</li>
                            <li class="ani " swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay="1.8s">吉祥物</li>
                        </ul>
                    </div>
                    <div class="screen6_img">
                        <!--这里三张图片尺寸与原尺寸不一样 原因？-->
                        <div class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay=".5s"><img src="./img/service/zt_service1_img1.png"></div>
                        <div class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.5s"><img src="./img/service/zt_service1_img2.png"></div>
                        <div class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s"><img src="./img/service/zt_service1_img3.png"></div>
                    </div>
                </div>
            </a>

    </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>


<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        direction: 'vertical',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        mousewheelControl: true,
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素 
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    });
</script>
    <script>
        $(function () {
            if(document.readyState=="complete"){
                $('.loading').hide();
            }
        });
    </script>